<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery2.0.3.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button onclick="set(1,event)">垂直中线对齐</button>
		<button onclick="set(2,event)">左对齐</button>
		<button onclick="set(3,event)">右对齐</button>
		<button onclick="set(4,event)">水平中线对齐</button>
		<button onclick="set(5,event)">上对齐</button>
		<button onclick="set(6,event)">下对齐</button>
		<button onclick="set(7,event)">水平等距分布</button>
		<button onclick="set(8,event)">垂直等距分布</button>
		<hr />
		<div id="111" class="ele" style="border: #000000 solid 0.0625rem;width:30px;height:60px;
		position: absolute;top:120px;left: 10px;">111</div>

		<hr />
		<div id="222" class="ele" style="border: #000000 solid 0.0625rem;;width:200px;height:100px;
		position: absolute;top:290px;left: 230px;">222</div>
		<div id="333" class="ele" style="border: #000000 solid 0.0625rem;width:30px;height:60px;
		position: absolute;top:120px;left: 50px;">333</div>
		<div id="444" class="ele" style="border: #000000 solid 0.0625rem;width:30px;height:60px;
		position: absolute;top:120px;left: 100px;">444</div>
		<div id="555" class="ele" style="border: #000000 solid 0.0625rem;width:30px;height:60px;
		position: absolute;top:120px;left: 260px;">555</div>
		<div id="666" class="ele" style="border: #000000 solid 0.0625rem;width:30px;height:60px;
		position: absolute;top:200px;left: 280px;">666</div>
		<hr />
		<script>
			var key = 0; //记录ctrl/shift键
			var cloneTemp = "";
			$(window).on('mousewheel', function(event, delta) {
				var dir = delta > 0 ? 'Up' : 'Down';
				if (dir == 'Up') {
					console.log('向上滚动');
				} else {
					console.log('向下滚动');
				}
				return false;

			});

			$(window).on('contextmenu', function() {
				return false;
			})
			$(window).mousedown(function(e) {
				console.log(e.which)
				//alert(e.which) // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键
				if (e.which == 1) {

				} else if (e.which == 2) {

				} else if (e.which == 3) {

				}
			})
			$(window).keydown(function(e) {
				if (e.ctrlKey) {
					key = 1;
				} else if (e.shiftKey) {
					key = 2;
				}
				if (e.ctrlKey && e.keyCode == 67) {
					key = 3;
					console.log(key);
					console.log($(".ele[status='active']").clone());
					cloneTemp = $(".ele[status='active']").clone();
				}
				if (e && e.keyCode == 27) { // 按 Esc  
					//要做的事情 
					console.log("按 esc");
				}
				if (e && e.keyCode == 113) { // 按 F2  
					//要做的事情 
					console.log("按 f2");
				}
				if (e && e.keyCode == 13) { // enter 键 
					//要做的事情 
					console.log("按 Enter");
				}
				if (e.keyCode == 86 && e.ctrlKey) {
					console.log("你按下了ctrl+V");
					console.log(cloneTemp);
					$(".ele").removeAttr("status");
					$(".ele").css("border", "#000000 solid 0.0625rem");
					var itop = parseInt($(cloneTemp).css("top"));
					var ileft = parseInt($(cloneTemp).css("left"));
					$(cloneTemp).css("top", itop + 40 + "px");
					$(cloneTemp).css("left", ileft + 10 + "px");
					$('body').append($(cloneTemp));
					cloneTemp = "";
				}
			}).keyup(function() {
				key = 0;
			});
			var arrayObj = new Array();
			$(window).click(function() {
				$(".ele").removeAttr("status");
				$(".ele").css("border", "#000000 solid 0.0625rem");
				arrayObj = new Array();
			})
			
			// arrayObj. push("");
			$("body").on("click", ".ele", function() {
				if (key != 1) {
					// console.log(arrayObj.length)
					arrayObj = new Array();
					// console.log(arrayObj.length)
					$(this).removeAttr("status");
					$(".ele").css("border", "#000000 solid 0.0625rem");
				}
				arrayObj.push($(this));
				console.log(arrayObj.length)
				$(this).attr("status", "active");
				$(this).css("border", "#5555ff solid 0.0625rem");
				event.stopPropagation();
			});
			// $(".ele").click(function(event) {
			// 	if (key != 1) {
			// 		$(this).removeAttr("status");
			// 		$(".ele").css("border", "#000000 solid 0.0625rem");
			// 	}
			// 	$(this).attr("status", "active");
			// 	$(this).css("border", "#5555ff solid 0.0625rem");
			// 	event.stopPropagation();
			// })

			function set(dqtype,event) {
				var first = arrayObj[0];
				var last = arrayObj[arrayObj.length-1];
				// console.log(arrayObj.slice(-1));
				var firstw = parseInt(first.width());
				var lastw = parseInt(last.width());
				var firsth = parseInt(first.height());
				var lasth = parseInt(last.height());
				
				var firstl = parseInt(first.css("left"));
				var lastl = parseInt(last.css("left"));
				var firstt = parseInt(first.css("top"));
				var lastt = parseInt(last.css("top"));
				
				var aw = parseInt($("#111").width());
				var bw = parseInt($("#222").width());
				var cw = parseInt($("#333").width());
				var dw = parseInt($("#444").width());
				var ew = parseInt($("#555").width());
				var ah = parseInt($("#111").height());
				var bh = parseInt($("#222").height());
				var ch = parseInt($("#333").height());
				var al = parseInt($("#111").css("left"));
				var bl = parseInt($("#222").css("left"));
				var cl = parseInt($("#333").css("left"));
				var dl = parseInt($("#444").css("left"));
				var el = parseInt($("#555").css("left"));
				var at = parseInt($("#111").css("top"));
				var bt = parseInt($("#222").css("top"));
				if (dqtype == 1) {
					// $("#111").css("left", (bl + (bw / 2) - (aw / 2)) + "px");
					$(arrayObj).each(function(){
						var inw = parseInt($(this).width());
						$(this).css("left", (firstl + (firstw / 2) - (inw / 2)) + "px");
					})
					
				} else if (dqtype == 2) {
					// $("#111").css("left", bl + "px");
					$(arrayObj).each(function(){
						$(this).css("left", firstl + "px");
					})
					
				} else if (dqtype == 3) {
					// $("#111").css("left", bl + bw - aw + "px");
					$(arrayObj).each(function(){
						var inw = parseInt($(this).width());
						$(this).css("left", firstl + firstw - inw + "px");
					})
				} else if (dqtype == 4) {
					// $("#111").css("top", (bt + (bh / 2) - (ah / 2)) + "px");
					$(arrayObj).each(function(){
						var inh = parseInt($(this).height());
						$(this).css("top", (firstt + (firsth / 2) - (inh / 2)) + "px");
					})
					
				} else if (dqtype == 5) {
					// $("#111").css("top", bt + "px");
					$(arrayObj).each(function(){
						$(this).css("top", firstt + "px");
					})
					
				} else if (dqtype == 6) {
					// $("#111").css("top", bt + bh - ah + "px");
					$(arrayObj).each(function(){
						var inh = parseInt($(this).height());
						$(this).css("top", firstt + firsth - inh + "px");
					})
				} else if (dqtype == 7) {
					//水平等距分布,中心垂线等距，等间距向后排列
					// al	bl+bw n个数a c d e
					
					// var sj = (el + ew / 2 - al - aw / 2) / (n - 1);
					// $("#333").css("left", al + aw / 2 + sj - cw / 2 + "px");
					// $("#444").css("left", al + aw / 2 + 2 * sj - dw / 2 + "px");
					
					var n = arrayObj.length;
					var list = new Array();
					list = arrayObj;
					list.sort(compare("left",1))
					console.log(list);
					var lfirst = list[0];
					var llast = list[list.length-1];
					// console.log(arrayObj.slice(-1));
					var lfirstw = parseInt(lfirst.width());
					var llastw = parseInt(llast.width());
					var lfirsth = parseInt(lfirst.height());
					var llasth = parseInt(llast.height());
					
					var lfirstl = parseInt(lfirst.css("left"));
					var llastl = parseInt(llast.css("left"));
					var lfirstt = parseInt(lfirst.css("top"));
					var llastt = parseInt(llast.css("top"));
					
					var sj = (llastl + llastw / 2 - lfirstl - lfirstw / 2) / (n - 1);
					$(list).each(function(index){
						var inh = parseInt($(this).height());
						var inw = parseInt($(this).width());
						$(this).css("left", lfirstl + lfirstw / 2 + index * sj - inw / 2 + "px");
					})
				} else if (dqtype == 8) {
					//水平等距分布
					// var n = 3;
					// var cj = (bt + bh - at) / (n - 1);
					// console.log(bt + bh - at);
					// console.log(cj);
					// console.log(at + cj - (ch / 2));
					// $("#333").css("top", (at + cj - (ch / 2)) + "px");
					
					var n = arrayObj.length;
					var list = new Array();
					list = arrayObj;
					list.sort(compare("top",1))
					console.log(list);
					var lfirst = list[0];
					var llast = list[list.length-1];
					// console.log(arrayObj.slice(-1));
					var lfirstw = parseInt(lfirst.width());
					var llastw = parseInt(llast.width());
					var lfirsth = parseInt(lfirst.height());
					var llasth = parseInt(llast.height());
					
					var lfirstl = parseInt(lfirst.css("left"));
					var llastl = parseInt(llast.css("left"));
					var lfirstt = parseInt(lfirst.css("top"));
					var llastt = parseInt(llast.css("top"));
					
					var cj = (llastt + llasth / 2 - lfirstt - lfirsth / 2) / (n - 1);
					$(list).each(function(index){
						var inh = parseInt($(this).height());
						var inw = parseInt($(this).width());
						$(this).css("top", lfirstt + lfirsth / 2 + index * cj - inh / 2 + "px");
					})
				} else {
					console.log("dptype error");
				}
				event.stopPropagation();
			}
			
			//针对对象数据进行排序propertyName 要排序的属性名，order 1为正序0为倒序
			function compare(propertyName,order) { 
			    return function (object1, object2) { 
			        var value1 = parseInt(object1.css(propertyName)); 
			        var value2 = parseInt(object2.css(propertyName)); 
					console.log(value1 + "    "+value2);
			        if(order==0){
			            if (value2 < value1) { 
			                return -1; 
			            } 
			            else if (value2 > value1) { 
			                return 1; 
			            } 
			            else { 
			                return 0; 
			            } 
			        }if(order==1){
			            if (value2 > value1) { 
			                return -1; 
			            } 
			            else if (value2 < value1) { 
			                return 1; 
			            } 
			            else { 
			                return 0; 
			            } 
			        }
			        
			    } 
			}
		</script>
	</body>
</html>
